<!DOCTYPE html>
<!-- mission:  做一个动画,  表格中的4条渠道不勾选就不能给用户去输入, 勾选了才能给用户放开  -->
<html>
    <head>
        <meta charset="utf-8">
        <title>开通支付产品</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>
    <body>
        <div class="result-zone content">
            <div class="layui-card">
                <div class="layui-card-header"> 开通产品(只处理勾选的选项!) <input type="button" value="修改配置" id="btnConfigChannel"
                        style="margin-left: 800px" class="layui-btn"></div>
                <div class="layui-card-body">
                    <form id="merchantProduct">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>

                                <th>开通服务</th>
                                <th>产品名</th>
                                <th>手续费</th>

                            </thead>
                            <tbody>
                                <tr id="" name="dataTr" id="">
                                    <td><input type="checkbox" name="27accf5b5cc7423ba01977425dd3c43d" checked></td>
                                    <td>
                                        微信支付
                                        <input type="hidden" name="id" id="id" value="27accf5b5cc7423ba01977425dd3c43d">
                                        <input type="hidden" name="productName" id="productName" value="微信支付">
                                        <input type="hidden" name="productCode" id="productCode" value="XYF501">
                                    </td>

                                    <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate"
                                            value='3.0'>
                                        ‰ &nbsp;&nbsp;&nbsp;
                                        保底: <input type="text" name="minimumCost" id="minimumCost" value=''>
                                        (元) &nbsp;&nbsp;&nbsp;
                                        封顶: <input type="text" name="cappingCost" id="cappingCost" value=''>
                                        (元)
                                    </td>

                                </tr>
                                <tr id="alipayTr" name="dataTr">
                                    <td><input type="checkbox" name="" id="alipay"></td>
                                    <td>
                                        支付宝支付
                                        <input type="hidden" name="id" id="id" value="">
                                        <input type="hidden" name="productName" id="productName" value="支付宝支付">
                                        <input type="hidden" name="productCode" id="productCode" value="XYF511">
                                    </td>

                                    <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate"
                                            value=''>
                                        ‰ &nbsp;&nbsp;&nbsp;
                                        保底: <input type="text" name="minimumCost" id="minimumCost" value=''>
                                        (元) &nbsp;&nbsp;&nbsp;
                                        封顶: <input type="text" name="cappingCost" id="cappingCost" value=''>
                                        (元)
                                    </td>

                                </tr>
                                <tr id="" name="dataTr">
                                    <td><input type="checkbox" name=""></td>
                                    <td>
                                        银联扫码支付-信用卡
                                        <input type="hidden" name="id" id="id" value="">
                                        <input type="hidden" name="productName" id="productName" value="银联扫码支付-信用卡">
                                        <input type="hidden" name="productCode" id="productCode" value="XYF551-CREDIT">
                                    </td>

                                    <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate"
                                            value=''>
                                        ‰ &nbsp;&nbsp;&nbsp;
                                        保底: <input type="text" name="minimumCost" id="minimumCost" value=''>
                                        (元) &nbsp;&nbsp;&nbsp;
                                        封顶: <input type="text" name="cappingCost" id="cappingCost" value=''>
                                        (元)
                                    </td>

                                </tr>
                                <tr id="" name="dataTr">
                                    <td><input type="checkbox" name=""></td>
                                    <td>
                                        银联扫码支付-借记卡
                                        <input type="hidden" name="id" id="id" value="">
                                        <input type="hidden" name="productName" id="productName" value="银联扫码支付-借记卡">
                                        <input type="hidden" name="productCode" id="productCode" value="XYF551-DEBIT">
                                    </td>

                                    <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate"
                                            value=''>
                                        ‰ &nbsp;&nbsp;&nbsp;
                                        保底: <input type="text" name="minimumCost" id="minimumCost" value=''>
                                        (元) &nbsp;&nbsp;&nbsp;
                                        封顶: <input type="text" name="cappingCost" id="cappingCost" value=''>
                                        (元)
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                        <input type="button" id="tableSubmit" value="提交" class="layui-btn">

                    </form>
                    <script>
                        layui.use(['table', 'layer', 'form', 'laydate'], function() {
                            var table = layui.table,
                                layer = layui.layer,
                                form = layui.form,
                                $ = layui.jquery;


                            let $checkboxs = new Array;
                            //把checkbox 全都加载到 一个数组中
                            $("tbody> tr :checkbox").each(function() {
                                //  console.log(($(this).attr("name")));
                                $checkboxs.push($(this));
                            });

                            //初始化页面, 该 没有勾选的 tr下的input设置为 disable
                            $checkboxs.forEach(function(value, index, obj) {
                                if (value.prop("checked") == false) {
                                    value.parent().parent().find("input:text").attr("disabled","disabled");
                                }
                            });

                             //这个value 是 checkbox , value.parent().parent() 是对应的 tr
                            $checkboxs.forEach(function(value, index, obj) {
                                value.change(function() {
                                    console.log(value.prop("checked"));
                                    if (value.prop("checked") == true) {
                                        //alert(true);
                                        value.parent().parent().find("input:text").attr("disabled",false);
                                    } else {
                                        value.parent().parent().find("input:text").attr(
                                            "disabled", "disabled");
                                    }
                                });
                            });

           /*                 $("tr > :checkbox").each(
                                function() {
                                    //console.log(($(this).val()));
                                }
                            );


                                  $("#alipay").parent().parent().css({
                                      "color": "red",
                                      "border": "2px solid red",
                                      "background-color": "green"
                                  });

                            $("#alipay").change(function() {
                                console.log($("#alipay").prop("checked"));
                                //找出它的父亲tr DOM节点

                                let $tr = $("#alipay").parent().parent();

                                console.log($tr == $("#alipayTr"));
                                if ($("#alipay").prop("checked") == true) {
                                    //console.log( $tr  );
                                    //console.log( $tr.attr("id")  );

                                    //console.log(  $tr.children()  );
                                    //console.log(  $tr.children(" :text").css()  );

                                    //console.log(   $tr.find("input:text").css()      );
                                    console.log($("#alipayTr").find("input:text").attr("disabled",
                                        false));
                                } else {
                                    console.log($("#alipayTr").find("input:text").attr("disabled",
                                        "disabled"));
                                    //console.log(   $tr.find("input:text").css()      );
                                }



                            }); */







                        });
                    </script>
                </div>
            </div>
    </body>
</html>
